// 生成随机数组点击事件
let proRambtn = document.querySelector(".random-value button");
// 随机数组
let randata;
let sortdata;

proRambtn.addEventListener("click", function() {
    randata = [];
    for (let i = 1; i <= 20; i++) {
        let suiji = Math.round(Math.random() * 100);
        // console.log(i);
        // console.log(suiji)
        randata.push(suiji);
        // console.log(data.length)
        for (let j = 0; j < randata.length - 1; j++) {
            if (randata[j] == randata[randata.length - 1]) {
                randata.pop();
                i--;
                break;
            }
        }
    }
    // 输出随机数组
    console.log(randata)
    let ranindex = randata.map(function(item, index) {
        return index + 1;
    })
    console.log(ranindex)
    let myChart = echarts.init(document.querySelector("#first-echart"))
    let option = {
        title: {
            text: '随机数组',
            top: "2%",
            left: "20%",
            textStyle: {
                color: '#fff',
                fontSize: 20,
            },
        },

        grid: {
            top: "10%",
            right: 10,
            bottom: "10%" //也可设置left和right设置距离来控制图表的大小
        },
        tooltip: {
            trigger: "axis",
            axisPointer: {
                type: "shadow",
                label: {
                    show: true
                }
            }
        },
        legend: {
            show: false,
            right: "14%",
            textStyle: {
                fontSize: 16,
                color: "#ffffff"
            }
        },
        xAxis: {
            data: ranindex,

            axisLine: {
                show: true, //隐藏X轴轴线
                lineStyle: {
                    color: '#01FCE3'
                }
            },
            axisTick: {
                show: false, //隐藏X轴刻度
            },
            axisLabel: {
                show: true,
                textStyle: {
                    fontSize: 14,
                    color: "#ebf8ac" //X轴文字颜色
                }
            },

        },
        yAxis: [{
                type: "value",
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#FFFFFF'
                    }
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: "#ebf8ac"
                    }
                },

            },
            {
                type: "value",
                position: "left",
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: "#ebf8ac"
                    }
                }
            }
        ],
        series: [{
            name: "随机值",
            type: "line",
            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
            smooth: true, //平滑曲线显示
            showAllSymbol: true, //显示所有图形。
            symbol: "circle", //标记的图形为实心圆
            symbolSize: 10, //标记的大小
            label: {
                normal: {
                    show: true,
                    position: 'top',
                    color: '#fff'
                }
            },
            itemStyle: {
                //折线拐点标志的样式
                color: "#058cff"
            },
            lineStyle: {
                color: "#058cff"
            },
            areaStyle: {
                color: "rgba(5,140,255, 0.2)"
            },
            data: randata
        }]
    };
    myChart.setOption(option)
    window.addEventListener('resize', function() {
        myChart.resize();
    })
    console.log(randata.sort());
    sortdata = randata.sort(function(a, b) { return a - b });
    console.log(sortdata)
    let myChart2 = echarts.init(document.querySelector("#second-echart"))

    option2 = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
                lineStyle: {
                    opacity: 0
                }
            },
        },
        grid: {
            left: '6%',
            right: '0%',
            bottom: '5%',
            top: '7%',
            height: '85%',
            containLabel: false,
            z: 22
        },
        xAxis: [{
            type: 'category',
            gridIndex: 0,
            data: ranindex,
            axisTick: {
                alignWithLabel: true
            },
            axisLine: {
                lineStyle: {
                    color: '#0c3b71'
                }
            },
            axisLabel: {
                show: true,
                color: '#f58220',
                fontSize: 16
            }
        }],
        yAxis: {
            type: 'value',
            gridIndex: 0,

            splitLine: {
                show: false
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: true,
                color: "#f58f98"
            },
            splitArea: {
                show: true,
                areaStyle: {
                    color: ['rgba(250,250,250,0.0)', 'rgba(250,250,250,0.05)']
                }
            }
        },
        series: {
            name: '值',
            type: 'bar',
            barWidth: '30%',
            xAxisIndex: 0,
            yAxisIndex: 0,
            label: {
                normal: {
                    show: true,
                    position: "top",
                    color: '#fff'
                }
            },
            itemStyle: {
                normal: {
                    barBorderRadius: 30,
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1, [{
                                offset: 0,
                                color: '#faa755'
                            },
                            {
                                offset: 0.5,
                                color: '#f8aba6'
                            },
                            {
                                offset: 1,
                                color: '#b2d235'
                            }
                        ]
                    )
                }
            },
            data: sortdata,
            zlevel: 11
        }
    };
    myChart2.setOption(option2)
    window.addEventListener('resize', function() {
        myChart2.resize();
    })
});

let pro3input = document.querySelector(".pro-echart3 input");
let pro3button = document.querySelector(".pro-echart3 button");
let pro3span = document.querySelector(".pro-echart3 span")


let leida = [];
pro3button.addEventListener("click", function() {
    let min = Infinity;
    let shunxu;
    let erfen;
    let sanfen;
    let chazhi;
    let i;
    for (i = 0; i < sortdata.length; i++) {
        if (Math.abs(sortdata[i] - Number(pro3input.value)) < min) {
            min = sortdata[i];
            if (sortdata[i] - Number(pro3input.value) == 0) {
                break;
            }
        }
    }
    console.log("i:" + (i + 1));
    pro3span.innerHTML = i + 1;
    shunxu = i + 1;
    erfen = ersearch(sortdata, Number(pro3input.value))

    sanfen = sansearch(sortdata, Number(pro3input.value));

    chazhi = insertsearch(sortdata, Number(pro3input.value))
    console.log("chazhi：" + chazhi);
    let nihao = [shunxu, erfen, sanfen, chazhi];
    console.log(nihao);
    leida = leida.concat([{
        symbol: "circle",
        symbolSize: 10,
        value: nihao,
        areaStyle: { color: "rgba(64, 205, 241, 0.2)" },
        itemStyle: {
            normal: {
                borderWidth: 1,
                color: "RGBA(0, 34, 66, 1)",
                borderColor: "rgba(146, 225, 255, 1)"
            }
        }
    }]);
    console.log(leida);


    let myChart = echarts.init(document.querySelector("#third-echart"))
    let option = {
        tooltip: {},
        radar: {
            radius: "80%", //大小
            nameGap: 1, // 图中工艺等字距离图的距离
            center: ["50%", "50%"], // 图的位置
            name: {
                textStyle: {
                    color: "rgba(101, 213, 255, 1)",
                    fontSize: 16
                }
            },
            // shape: 'circle',
            indicator: [
                { name: '顺序', max: 20 },
                { name: '二分', max: 20 },
                { name: '三分', max: 20 },
                { name: '插值', max: 20 }
            ],
            axisLine: {
                lineStyle: {

                    color: "rgba(153, 209, 246, 0.2)"
                }
            },
            splitArea: {
                show: false,
                areaStyle: {
                    color: "rgba(255,0,0,0)" // 图表背景的颜色
                }
            },
            splitLine: {
                show: true,
                lineStyle: {
                    width: 1,
                    color: "rgba(153, 209, 246, 0.2)" // 设置网格的颜色
                }
            }
        },

        series: [{
            name: "比较次数",
            type: "radar",
            symbol: "angle",
            itemStyle: {
                normal: {
                    areaStyle: { type: "default" }
                }
            },
            data: leida
        }]
    };
    myChart.setOption(option);
    window.addEventListener('resize', function() {
        myChart.resize();
    })
});

function ersearch(arr, key) {
    let i = 0;
    var low = 0,
        high = arr.length - 1; //定义一个最高点和最低点
    while (low <= high) { //当最高点大于最低点的时候
        var mid = Math.floor((high + low) / 2); //挑一个中间数
        i++;
        if (arr[mid] == key) {
            return i;
        } //如果中间数等于查找的值，返回这个中间数的位置
        else if (arr[mid] < key) {
            low = mid + 1; //中间值小于查找的值的话，将查找的数列段的最低点变成中点+1
        } else if (arr[mid] > key) {
            high = mid - 1; //大于的话最高点变成中点-1
        }
    }
    return -1;
};

function sansearch(arr, key) {
    console.log("key：" + key)
    console.log("arr：" + arr)
    let left = 0;
    let right = arr.length;
    let i = 0;
    while (left <= right) {
        i++;
        let midl = Math.floor(left + (right - left) / 3);
        console.log("..." + midl)
        console.log(arr[midl] == key);
        console.log(arr[midl]);
        let midr = Math.floor(right - (right - left) / 3);
        console.log("...r" + midr)
        console.log(arr[midr] == key);
        console.log(arr[midr]);
        if (arr[midl] == key || arr[midr] == key) {
            console.log(333)
            break;
        }
        if (arr[midl] > key) {
            right = midl - 1;

        } else if (arr[midr] < key) {
            left = midr + 1;
        } else if (arr[midl] < key && arr[midr] > key) {
            right = midr - 1;
            left = midl + 1;
        }

    }
    console.log(i);
    return i;
}

function insertsearch(arr, value) {
    let start = 0;
    let end = arr.length - 1;
    let i = 0;
    while (start <= end) {
        i++;
        let mid = start + Math.floor((value - arr[start]) / (arr[end] - arr[start])) * (end - start);
        if (arr[mid] == value) {
            console.log("oooo:" + arr[mid])
            break;
        } else if (arr[mid] > value) {
            end = mid - 1
        } else {
            start = mid + 1
        }
    }
    return i;
}




// 查找元素点击事件
let findIn = document.querySelector(".find-out input");
let findOut = document.querySelector(".find-out button");
let findSpan = document.querySelector(".find-out span");

findOut.addEventListener("click", function() {
    console.log(randata)
    console.log(findIn.value)
    let K = randata.indexOf(Number(findIn.value));
    console.log(K);
    findSpan.innerHTML = K + 1;

});

// 二分检索
let cinvalue = document.querySelector("#pro-value");
cinvalue.addEventListener("blur", function() {
    console.log(this.value)
    let cinarray = (this.value.split(','));
    console.log(cinarray);
    let cinarray2 = cinarray.map(function(item) {
        return Number(item);
    })
    console.log(cinarray2)
});




// (function() {
//     let data = [];
//     for (let i = 1; i <= 20; i++) {
//         let suiji = Math.round(Math.random() * 100);
//         // console.log(i);
//         // console.log(suiji)
//         data.push(suiji);
//         // console.log(data.length)
//         for (let j = 0; j < data.length - 1; j++) {
//             if (data[j] == data[data.length - 1]) {
//                 data.pop();
//                 i--;
//                 break;
//             }
//         }
//     }
//     // 输出随机数组
//     console.log(data)



//     let flag;
//     if (data[0] < data[1]) {
//         flag = 1;
//     } else {
//         flag = 2;
//     }
//     for (let i = 0; i < data.length - 1; i++) {
//         if (data[i] < data[i + 1]) {
//             if (flag == 1) {
//                 flag = 1;
//             } else if (flag == 2) {
//                 flag = 4;
//             } else if (flag == 4) {
//                 flag = 4;
//             } else {
//                 flag = 0;
//             }
//         } else {
//             if (flag == 2) {
//                 flag = 2;
//             } else if (flag == 1) {
//                 flag = 3;
//             } else if (flag == 3) {
//                 flag = 3;
//             } else {
//                 flag = 0;
//             }
//         }
//     }
//     console.log("flag=" + flag)
// })();


// (function() {
//     let myChart = echarts.init(document.querySelector("#first-echart"))
//     let option = {
//         title: {
//             text: '随机数组',
//             left: "20%",
//             textStyle: {
//                 color: '#fff',
//                 fontSize: 20,
//             },
//         },

//         grid: {
//             top: "10%",
//             bottom: "10%" //也可设置left和right设置距离来控制图表的大小
//         },
//         tooltip: {
//             trigger: "axis",
//             axisPointer: {
//                 type: "shadow",
//                 label: {
//                     show: true
//                 }
//             }
//         },
//         legend: {
//             right: "14%",
//             textStyle: {
//                 fontSize: 16,
//                 color: "#ffffff"
//             }
//         },
//         xAxis: {
//             data: [
//                 1, 2, 3, 4, 5, 6, 7, 8, 9, 10

//             ],
//             axisLine: {
//                 show: true, //隐藏X轴轴线
//                 lineStyle: {
//                     color: '#01FCE3'
//                 }
//             },
//             axisTick: {
//                 show: false, //隐藏X轴刻度
//             },
//             axisLabel: {
//                 show: true,
//                 textStyle: {
//                     fontSize: 14,
//                     color: "#ebf8ac" //X轴文字颜色
//                 }
//             },

//         },
//         yAxis: [{
//                 type: "value",


//                 splitLine: {
//                     show: false
//                 },
//                 axisTick: {
//                     show: false
//                 },
//                 axisLine: {
//                     show: true,
//                     lineStyle: {
//                         color: '#FFFFFF'
//                     }
//                 },
//                 axisLabel: {
//                     show: true,
//                     textStyle: {
//                         color: "#ebf8ac"
//                     }
//                 },

//             },
//             {
//                 type: "value",
//                 position: "right",
//                 splitLine: {
//                     show: false
//                 },
//                 axisTick: {
//                     show: false
//                 },
//                 axisLine: {
//                     show: false
//                 },
//                 axisLabel: {
//                     show: true,
//                     textStyle: {
//                         color: "#ebf8ac"
//                     }
//                 }
//             },
//             {
//                 type: "value",
//                 gridIndex: 0,
//                 min: 50,
//                 max: 100,
//                 splitNumber: 8,
//                 splitLine: {
//                     show: false
//                 },
//                 axisLine: {
//                     show: false
//                 },
//                 axisTick: {
//                     show: false
//                 },
//                 axisLabel: {
//                     show: false
//                 },
//                 splitArea: {
//                     show: true,
//                     areaStyle: {
//                         color: ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.05)"]
//                     }
//                 }
//             }
//         ],
//         series: [{
//                 name: "销售水量",
//                 type: "line",
//                 yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
//                 smooth: true, //平滑曲线显示
//                 showAllSymbol: true, //显示所有图形。
//                 symbol: "circle", //标记的图形为实心圆
//                 symbolSize: 10, //标记的大小
//                 itemStyle: {
//                     //折线拐点标志的样式
//                     color: "#058cff"
//                 },
//                 lineStyle: {
//                     color: "#058cff"
//                 },
//                 areaStyle: {
//                     color: "rgba(5,140,255, 0.2)"
//                 },
//                 data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5]
//             },
//             {
//                 name: "主营业务",
//                 type: "bar",
//                 barWidth: 15,
//                 itemStyle: {
//                     normal: {
//                         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
//                                 offset: 0,
//                                 color: "#00FFE3"
//                             },
//                             {
//                                 offset: 1,
//                                 color: "#4693EC"
//                             }
//                         ])
//                     }
//                 },
//                 data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5]
//             }
//         ]
//     };
//     myChart.setOption(option)
//     window.addEventListener('resize', function() {
//         myChart.resize();
//     })
// })()